<template>
    <div class="device_details">
        <div class="device_left">
            <div class="btn_back" @click="goBack">
                <i class="el-icon-back"></i>
                返回
            </div>
            <div class="Data">
                <div class="baseData Data_item">
                    <div class="title">
                        <span>设备信息</span>
                    </div>
                    <el-image class="device_img" style="width: 100%; height: 120px" title="设备图片 点击查看大图" :src="deviceInfo.imgurl" :preview-src-list="deviceInfo.imgurl">
                        <div slot="error" class="image-slot">
                            <img style="width: 100%; height: 200px" src="@/assets/Device/no_img_1.png" alt />
                        </div>
                    </el-image>
                    <ul class="details">
                        <li v-for="item in deviceConfig.details" :key="item">
                            <span>{{ item.label }}</span>
                            <span v-if="item.format">{{ item.format(deviceInfo[item.name]) }}</span>
                            <span v-else>{{ deviceInfo[item.name] }}</span>
                        </li>
                    </ul>
                </div>
                <div class="Data_item1">
                    <div class="notice Data_item">
                        <div class="title">
                            <span>告警总数</span>
                            <span style="fontsize: 22px; fontweight: 600">{{ deviceInfo.warn_num }}</span>
                        </div>
                        <div class="notice_item">
                            <span>严重</span>
                            <span style="color: #fe0000">
                                {{ deviceInfo.level_3 }}
                            </span>
                        </div>
                        <div class="notice_item">
                            <span>中等</span>
                            <span style="color: #db0b99">
                                {{ deviceInfo.level_2 }}
                            </span>
                        </div>
                        <div class="notice_item">
                            <span>一般</span>
                            <span style="color: #feff00">
                                {{ deviceInfo.level_1 }}
                            </span>
                        </div>
                    </div>
                    <div class="order Data_item">
                        <div class="title">
                            <span>工单总数</span>
                            <span style="fontsize: 22px; fontweight: 600">{{ deviceInfo.notice_num }}</span>
                        </div>
                        <div class="order_item">
                            <span>已处理</span>
                            <span>
                                {{ deviceInfo.handled }}
                            </span>
                        </div>
                        <div class="order_item">
                            <span>未处理</span>
                            <span style="color: #e13b2f">
                                {{ deviceInfo.unHandled }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device_right">
            <div class="title">实时数据</div>
            <el-select v-model="sensorSelected" placeholder="选择测点" @change="sensorChange">
                <el-option v-for="item in deviceInfo.sensor" :key="item.id" :label="item.sensor_name + item.direction" :value="item.id"></el-option>
            </el-select>
            <div class="date_time">
                <el-date-picker v-model="date_time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
            </div>
            <div class="sensor_del">
                <div class="sensor_item">
                    <div class="item_sensor_type">
                        <span>类型</span>
                        <span>{{ sensorInfo.sensor_type_name }}</span>
                    </div>
                    <div class="item_sight item_sight1">
                        <span>地址号</span>
                        <span>{{ sensorInfo.address }}</span>
                    </div>
                    <div class="item_sight item_sight1">
                        <span>端口号</span>
                        <span>{{ sensorInfo.port }}</span>
                    </div>
                    <div class="item_sight item_sight1">
                        <span>状态</span>
                        <span>{{ sensorInfo.status }}</span>
                    </div>
                </div>
                <div class="sensor_item">
                    <mqtt-data ref="mqttData" :sensorInfo="sensorInfo" @changeStatus="changeStatus" />
                </div>
            </div>
        </div>
        <div class="device_mid">
            <i class="el-icon-bottom" title="导出报表" @click="downSensorLastdata"></i>
            <div class="mask"></div>
            <div class="device_switch">
                <el-tooltip class="item" content="点击可重新选择设备" placement="right">
                    <span @click="choiceDevice">{{ deviceInfo.device_name }}</span>
                </el-tooltip>
                <div></div>
            </div>
            <div class="waveform">
                <div class="waveform_menu">
                    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                        <el-tab-pane label="设备模型图" name="active_1">
                            <div class="menu_content">
                                <div class="img25D">
                                    <img25D @changeGCData="changeGCData" @img25dChangeData="sensorClick" ref="img25D" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="设备详情" name="active_5">
                            <div class="menu_content">
                                <device-plm :deviceInfo="deviceInfo" :date_time="date_time" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <track-page ref="trackPage" :sensorInfo="sensorInfo" :time="timeDomain.timeSelected"></track-page>
        <recent-eig ref="recentEig" :sensorInfo="sensorInfo"></recent-eig>
        <fall-wave ref="fallWave" :sensorInfo="sensorInfo" :tagSelected="timeDomain.tagsSelected" :date_time="date_time" />
        <color-wave ref="colorWave" :sensorInfo="sensorInfo" :tagSelected="timeDomain.tagsSelected" :date_time="date_time" />
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { deviceDetailsApi, sensorDetailsApi, eigenvalueRecentApi, eigenvalueWaveTagsApi, eigenvalueWaveGetlistApi, eigenvalueWaveTimelistApi, deviceGetDevice25dApi, requestApi, fileApi } from '@/requset/api'
import img25D from '@/components/img25D'
import devicePlm from '@/components/devicePlm'
import trackPage from '@/components/track'
import fallWave from '@/components/fallWave_'
import colorWave from '@/components/colorWave'
import recentEig from '@/components/recentEig'
import drawEig from '@/components/drawEig'
import spec from '@/components/spec'
import mqttData from '@/components/mqttData'
import { mapState } from 'vuex'
import { pickerOptions, contextMenuData1, contextMenuData2, deviceConfig } from './config.js'
export default {
    data() {
        return {
            dialogVisible: false,
            spectrumData: [],
            spectrumFre: [],
            activeName: 'active_1',
            pickerOptions: null,
            clients: [],
            deviceInfo: {},
            device25D: {},
            // 选中的测点
            sensorSelected: 0,
            // 当前测点的基础数据
            sensorInfo: {},
            // mqtt订阅主题
            topic: '',
            // 当前测点的实时数据
            //特征值相关
            eigenvalue: {
                tags: [],
                tagsSelected: [],
                // 当前传感器的特征值数据
                list: {},
                // 某一特征值最近数据
                recentData: [],
                RecentDataisShow: false,
            },
            // 时域相关(图谱分析)
            timeDomain: {
                tags: [],
                tagsSelected: '',
                timeList: [],
                timeSelected: '',
                list: {},
            },
            //波形特征值
            dataFeatures: {
                tags: [],
                tagsSelected: {},
                timeList: [],
                timeSelected: {},
                list: [],
            },
            // 默认时间节点 ：最近一天
            date_time: [new Date(Date.now() - 86400000 * 1), new Date(Date.now())],
            device_id: null,
            contextMenuData1: null,
            contextMenuData2: null,
            eigname: '',
            deviceConfig: null,
        }
    },
    components: {
        img25D,
        devicePlm,
        trackPage,
        fallWave,
        colorWave,
        recentEig,
        drawEig,
        spec,
        mqttData,
    },
    computed: {
        ...mapState('backstage', ['mqttConfig']),
        dataFeaturesWatch() {
            let startTime = this.date_time[0].getTime()
            let endTime = this.date_time[1].getTime()
            let sensor_id = this.sensorSelected
            let tagsSelected = this.dataFeatures.tagsSelected
            let timeSelected = this.dataFeatures.timeSelected
            let activeName = this.activeName
            return { startTime, endTime, sensor_id, tagsSelected, timeSelected, activeName }
        },
    },
    methods: {
        changeGCData(e) {
            this.$refs.mqttData.setGCdata(e)
        },
        changeStatus(a) {
            this.sensorInfo.status = a
        },
        getDomainTime(e) {
            this.timeDomain.timeSelected = e
        },
        handleClick(e) {
            if (e.label == '设备模型图') this.$refs.img25D.initImg(this.device_id)
        },
        getDomainTagSelected(e) {
            this.timeDomain.tagsSelected = e
        },
        getEigTags(e) {
            this.eigenvalue.tags = e
        },
        showTrack() {
            this.$refs.trackPage.showTrack()
        },
        goBack() {
            this.$router.back()
        },
        choiceDevice() {
            // 重新选择设备
            this.$router.push('/index/devicemang/device')
        },
        //绘制特征值最近波形图
        drawRecentData(feature_key, sensor_id) {
            this.$refs.recentEig.showRecent(feature_key, sensor_id)
        },
        //针对波形特征值 点击出现弹窗
        drawRecentData_1(item) {
            if (item.unit == null) item.unit = ''
            let obj = {
                id: this.sensorInfo.id,
                feature_key: item.feature_key,
            }
            this.eigenvalueRecent(obj).then(() => {
                this.eigenvalue.RecentDataisShow = true
                this.$nextTick(() => {
                    let recentData = this.$refs.recentData
                    let myChart = echarts.init(recentData)
                    if (myChart) myChart.clear()
                    recentData.removeAttribute('_echarts_instance_')
                    let dataX = []
                    let seriesData = []
                    let legendData = []
                    let arr = []
                    this.eigenvalue.recentData.forEach((e) => {
                        dataX.push(e.time)
                        arr.push(e.value)
                    })
                    seriesData.push({
                        name: item.feature_value + ' ' + item.unit,
                        data: arr,
                        type: 'line',
                    })
                    legendData.push(item.feature_value + ' ' + item.unit)
                    let option = {
                        color: ['#FFDC00'],
                        legend: {
                            show: true,
                            data: legendData,
                            textStyle: {
                                // 文本样式
                                fontSize: 14,
                                color: '#0CD9E8',
                            },
                        },
                        series: seriesData,

                        xAxis: {
                            type: 'category',
                            //x轴数据，时间节点
                            data: dataX,
                            name: '时间',
                            nameTextStyle: {
                                fontWeight: 600,
                                fontSize: 16,
                                color: '#0CD9E8',
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#0CD9E8',
                                    fontSize: 12,
                                },
                            },
                            axisLine: {
                                //坐标轴颜色
                                lineStyle: {
                                    color: '#007BFF',
                                },
                            },
                        },
                        yAxis: {
                            type: 'value',
                            name: '特征值',
                            nameLocation: 'end', //name的具体位置，可调整上中下左
                            nameTextStyle: {
                                fontWeight: 600,
                                fontSize: 16,
                                color: '#0CD9E8',
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#0CD9E8',
                                    fontSize: 12,
                                },
                            },
                            splitLine: {
                                //网格区域
                                show: true,
                                lineStyle: {
                                    color: '#B2E3FF',
                                    width: 0.4,
                                    type: 'dotted',
                                },
                            },
                        },
                        // tooltip，鼠标放到折线图上展示的数据展示样式
                        tooltip: {
                            trigger: 'axis', // axis   item   none三个值
                        },

                        grid: {
                            //距离外层box左右位置
                            // x: 30,//左
                            // y: 45,//上
                            // x2: 45,//右
                            // y2: 40,//下
                            // borderWidth: 1,
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                realtime: true, //拖动滚动条时是否动态的更新图表数据
                                height: 15, //滚动条高度
                                start: 0, //滚动条开始位置（共100等份）
                                end: 100, //结束位置（共100等份）
                                fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
                                handleColor: 'rgba(70,130,180,0.8)', // 手柄颜色
                            },
                        ],
                        // 工具栏,右上角工具区域缩放
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    realtime: false,
                                    yAxisIndex: 'none',
                                },
                            },
                        },
                    }
                    myChart.setOption(option)
                    const chartObserver = new ResizeObserver(() => {
                        myChart.resize()
                    })
                    chartObserver.observe(ref)
                    window.addEventListener('resize', function () {
                        myChart.resize()
                    })
                })
            })
        },
        //获取最近特征值数据
        eigenvalueRecent(obj) {
            return eigenvalueRecentApi(obj).then((res) => {
                if (res.data.code == 0) {
                    this.eigenvalue.recentData = res.data.data
                }
            })
        },
        // 显示瀑布图
        showFallWave() {
            this.$refs.fallWave.showFallWave()
        },
        showColorWave() {
            this.$refs.colorWave.showColorWave()
        },
        // 选择特征值
        selectEigenvalue(e) {},
        // 断开mqtt连接
        destroyMqttConnection() {
            if (this.clients.length != 0) {
                this.clients.forEach((e) => {
                    if (e.client) {
                        e.client.unsubscribe(e.topic)
                    }
                })
                this.clients = []
            }
        },
        // 查询设备详情
        deviceDetails(device_id, sensor_id) {
            deviceDetailsApi(device_id).then((res) => {
                if (res.data.code == 0) {
                    this.deviceInfo = res.data.data[0]
                    let sensor_id_show = this.deviceInfo.sensor[0].id //默认展示第一个测点信息
                    if (sensor_id) sensor_id_show = sensor_id
                    this.sensorSelected = sensor_id_show
                    this.sensorDetails(sensor_id_show)
                }
            })
        },
        // 查询测点详情
        sensorDetails(id) {
            return sensorDetailsApi(id).then((res) => {
                if (res.data.code == 0) {
                    this.sensorInfo = res.data.data
                    // let { topic, address, port, id, single, direction } = res.data.data
                }
            })
        },
        // 获取波形特征值标签
        eigenvalueWaveTags(id) {
            eigenvalueWaveTagsApi(id).then((res) => {
                if (res.data.code == 0) {
                    this.dataFeatures.tags = res.data.data
                }
            })
        },
        // 获取波形特征值数据
        eigenvalueWaveGetlist(obj) {
            return eigenvalueWaveGetlistApi(obj).then((res) => {
                if (res.data.code == 0) {
                    this.dataFeatures.list = res.data.data
                }
            })
        },
        // 获取波形特征值时间数组
        eigenvalueWaveTimelist(obj) {
            eigenvalueWaveTimelistApi(obj).then((res) => {
                if (res.data.code == 0) {
                    this.dataFeatures.timeList = res.data.data
                    if (res.data.data.length != 0) {
                        this.dataFeatures.timeSelected = res.data.data[0].time
                    }
                }
            })
        },
        // 传感器改变
        sensorChange(e) {
            this.sensorDetails(e)
        },
        downSensorLastdata() {
            fileApi(
                'post',
                'diag/last/data',
                {
                    device_ids: [this.deviceInfo.id],
                },
                true,
            )
        },
        sensorClick(id, time) {
            //25D图点击
            this.sensorSelected = id
            if (time) {
                let time_start = new Date(time).getTime() - 3600 * 1000 * 6
                let time_end = new Date(time).getTime() + 3600 * 1000 * 6
                this.$set(this.date_time, 0, new Date(time_start))
                this.$set(this.date_time, 1, new Date(time_end))
            }
            this.activeName = 'eigenvalue'
        },
        recentTime(e) {
            this.activeName = 'active_3'
            this.$refs.spec.changeTimeSelected(e)
        },
    },
    watch: {
        dataFeaturesWatch: {
            handler(newVal, oldVal) {
                if (this.activeName == 'active_4') {
                    let obj = {
                        id: newVal.sensor_id,
                        key: newVal.tagsSelected.key,
                        time: newVal.timeSelected,
                    }
                    this.eigenvalueWaveGetlist(obj)
                }
            },
        },
    },

    created() {
        this.pickerOptions = pickerOptions
        this.contextMenuData2 = contextMenuData2
        this.contextMenuData1 = contextMenuData1
        this.deviceConfig = deviceConfig
        // this.activeName = 'active_1'
        /*接受传递来的设备 测点 时间信息 */
        let device_id = Number(this.$route.query.device_id)
        this.device_id = device_id
        this.$nextTick(() => this.$refs.img25D.initImg(this.device_id))

        let sensor_id = Number(this.$route.query.sensor_id)
        let activeName = this.$route.query.activeName
        let time = this.$route.query.time
        this.eigname = this.$route.query.key
        if (time) {
            let time_start = new Date(time).getTime() - 3600 * 1000 * 6
            let time_end = new Date(time).getTime() + 3600 * 1000 * 6
            this.$set(this.date_time, 0, new Date(time_start))
            this.$set(this.date_time, 1, new Date(time_end))
        }
        if (activeName) {
            this.activeName = activeName
        }
        this.deviceDetails(device_id, sensor_id)
    },
}
</script>
<style lang="less" scoped>
@keyframes pulse {
    100% {
        transform: scale(8);
        opacity: 0;
    }
}

@keyframes pulse1 {
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.el-icon-bottom {
    color: #00ffff;
    font-size: 24px;
    /* left: 0; */
    position: absolute;
    right: 38px;
    top: 81px;
    z-index: 99;

    cursor: pointer;
}

.device_details {
    width: 100%;
    height: 100%;

    .device_left {
        width: 280px;
        height: 100%;
        float: left;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 100%;

        .btn_back {
            width: 80px;
            height: 46px;
            // background-color: aqua;
            font-size: 20px;
            line-height: 46px;
            cursor: pointer;
            font-weight: 600;
            color: white;
        }

        .Data {
            height: calc(100% - 64px);

            // display: flex;
            // flex-direction:column;
            // justify-content: space-between;
            .Data_item {
                width: 100%;
                background-color: rgb(0, 10, 100, 0.3);
                margin-bottom: 10px;
                overflow: hidden;

                .title {
                    font-size: 18px;
                    font-weight: 600;
                    color: #007bff;
                    width: 96%;
                    height: 40px;
                    line-height: 40px;
                    text-indent: 10px;
                    display: flex;
                    justify-content: space-between;

                    span:nth-child(2) {
                        color: aqua;
                        font-weight: 500;
                        font-size: 14px;
                        cursor: pointer;
                    }
                }
            }

            .baseData {
                border-top: 1px solid aqua;

                .device_img {
                    width: 96%;
                }

                .details {
                    width: 96%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    // background-color: rgb(0,0,50,0.2);
                    box-shadow: 0 0 1rem rgb(41 105 237 / 50%);
                    margin: 0 auto;

                    li {
                        width: 100%;
                        margin: 0 auto;
                        height: 30px;
                        line-height: 30px;
                        display: flex;
                        justify-content: space-between;

                        span:nth-child(1) {
                            color: #b2e3ff;
                            font-weight: 600;
                            width: 40%;
                        }

                        span:nth-child(2) {
                            color: aqua;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

            .Data_item1 {
                width: 100%;
                // background-color: red;

                height: 270px;

                .notice {
                    .notice_item {
                        width: 30%;
                        height: 80px;
                        background-color: rgba(96, 142, 235, 0.1);
                        background-image: url(@/assets/common/form_item_bg.png);
                        background-size: 100% 100%;
                        float: left;
                        margin-left: 3%;
                        position: relative;

                        span:nth-child(1) {
                            position: absolute;
                            color: #b2e3ff;
                            font-weight: 400;
                            width: 80%;
                            top: 20%;
                            left: 10%;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            color: #00ffff;
                            position: absolute;
                            font-weight: 600;
                            font-size: 22px;
                            width: 100%;
                            text-align: center;
                            bottom: 20px;
                        }
                    }
                }

                .order {
                    .order_item {
                        width: 40%;
                        height: 70px;
                        background-color: rgba(96, 142, 235, 0.1);
                        background-image: url(@/assets/common/form_item_bg.png);
                        background-size: 100% 100%;
                        float: left;
                        margin-left: 7%;
                        position: relative;

                        span:nth-child(1) {
                            position: absolute;
                            color: #00ffff;
                            font-weight: 400;
                            font-size: 16px;
                            width: 100%;
                            text-align: center;
                            top: 10px;
                            left: 0;
                            width: 100%;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            position: absolute;
                            color: #00ffff;
                            font-weight: 600;
                            font-size: 22px;
                            width: 100%;
                            text-align: center;
                            bottom: 10px;
                            left: 0;
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .device_right {
        width: 280px;

        height: 100%;
        position: relative;
        float: right;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 100%;

        .title {
            width: 90%;
            height: 40px;
            color: #007bff;
            font-size: 18px;
            font-weight: 600;
            position: absolute;
            // background-color: red;
            line-height: 40px;
            top: 20px;
            left: 4%;
        }

        .el-select {
            position: absolute;
            top: 60px;
        }

        .date_time {
            position: absolute;
            top: 110px;
            width: 100%;

            .el-date-editor--datetimerange.el-input,
            .el-date-editor--datetimerange.el-input__inner {
                width: 300px;
            }
        }

        .sensor_del {
            position: absolute;
            top: 160px;
            width: 96%;
            background-color: rgba(96, 142, 235, 0.1);
            height: calc(100% - 160px);
            left: 2%;
            overflow: auto;

            .sensor_item {
                width: 100%;
                // background-color: red;
                margin: 10px 0;
                overflow: hidden;

                .item_title {
                    color: #007bff;
                    font-size: 18px;
                    font-weight: 600;
                    width: 100%;
                    float: left;
                    margin-bottom: 10px;
                }

                .item_sight {
                    width: 30%;
                    float: left;
                    margin-left: 2%;
                    margin-bottom: 6px;
                    background-color: rgba(96, 142, 235, 0.1);
                    background-image: url(@/assets/common/form_item_bg.png);
                    background-size: 100% 100%;
                    height: 90px;
                    position: relative;
                    transition: all 0.3s;
                    cursor: pointer;
                    line-height: 16px;

                    span:nth-child(1) {
                        color: #b2e3ff;
                        font-weight: 800;
                        text-align: center;
                        width: 100%;
                        position: absolute;
                        top: 25%;
                        font-size: 14px;
                    }

                    span:nth-child(2) {
                        color: #00ffff;
                        font-weight: 500;
                        text-align: center;
                        width: 100%;
                        position: absolute;
                        top: 62%;
                    }
                }

                .item_sensor_type {
                    width: 100%;
                    height: 80px;
                    background-image: url(@/assets/common/form_item_bg.png);
                    background-size: 100% 100%;

                    span:nth-child(1) {
                        display: block;
                        color: #b2e3ff;
                        font-weight: 800;
                        text-align: center;
                        width: 100%;
                        height: 40%;
                        line-height: 48px;
                    }

                    span:nth-child(2) {
                        height: 50%;
                        line-height: 40px;
                        display: block;
                        color: #0cd9e8;
                        font-weight: 800;
                        text-align: center;
                        width: 100%;
                        font-size: 20px;
                    }
                }

                .item_sight:hover {
                    transform: scale(1.1);
                    box-shadow: 0 0 1rem rgba(102, 244, 229, 0.5);
                }
            }
        }
    }

    .device_mid {
        width: calc(100% - 580px);
        height: 100%;
        float: left;

        position: relative;

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url(@/assets/common/table_bg.png);
            background-size: 100% 100%;
            opacity: 0.8;
        }

        .device_switch {
            width: 92%;
            height: 40px;
            background-color: rgba(0, 63, 252, 0.2);
            position: absolute;
            left: 4%;
            top: 20px;
            line-height: 40px;
            text-align: center;
            color: #00ffff;
            font-size: 22px;
            font-weight: bold;

            span {
                cursor: pointer;
            }
        }

        .waveform {
            width: 96%;
            left: 2%;
            height: calc(100% - 66px);
            position: absolute;
            bottom: 0;

            .tools {
                width: 110px;
                height: 34px;
                background-color: #091f4c;
                border: 1px solid #007bff;
                line-height: 34px;
                border-radius: 4px;
                position: absolute;
                right: 0;
                z-index: 99;
                padding: 0 12px;
                position: absolute;
                right: 0;
                top: 4px;

                .iconfont {
                    font-size: 22px;
                    color: #b2e3ff;
                    cursor: pointer;
                    transition: all 0.3s;
                    margin-right: 8px;
                }

                .iconfont:hover {
                    color: #0cd9e8 !important;
                }
            }

            .waveform_menu {
                width: 100%;
                height: 100%;

                .menu_content {
                    width: 100%;
                    height: calc(100vh - 180px);
                    position: relative;

                    .img25D {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .el-select {
                        width: 160px;
                        margin-right: 4px;
                    }

                    .maps {
                        width: 100%;
                        height: 94%;
                        overflow: auto;
                        position: relative;

                        .echarts_noData {
                            text-align: center;
                            margin-top: 10%;

                            img {
                                width: 320px;
                            }

                            div {
                                margin-top: 10px;
                                color: #b2e3ff;
                                font-size: 18px;
                                font-weight: 600;
                            }
                        }
                    }

                    .tables {
                        width: 100%;
                        height: 90%;
                        margin-top: 8px;
                        overflow: auto;
                        position: relative;

                        .tables_item {
                            width: 46%;
                            height: 40px;
                            line-height: 40px;
                            // background-color: #4c68d5;
                            display: flex;
                            justify-content: space-between;
                            margin-left: 1%;
                            font-size: 14px;
                            float: left;
                            color: #b2e3ff;
                            border: 1px solid #007bff;

                            span:nth-child(1) {
                                font-weight: 600;
                                width: 80%;
                                // background-color:#3b97cd ;
                                text-align: center;
                                transition: all 0.3s;
                            }

                            span:nth-child(1):hover {
                                color: #007bff;
                                cursor: pointer;
                                font-size: 16px;
                            }

                            span:nth-child(2) {
                                font-weight: 600;
                                width: 20%;
                                // background-color:#3b97cd ;
                                text-align: center;
                                transition: all 0.3s;
                            }

                            span:nth-child(2):hover {
                                color: #007bff;
                                cursor: pointer;
                                font-size: 16px;
                            }
                        }

                        .noData {
                            background-color: #00ffff;
                            // height: 200px;
                            width: 200px;
                            position: absolute;
                            text-align: center;
                            background-image: url(@/assets/DeviceDetails/noData.png);
                            background-repeat: no-repeat;
                        }
                    }
                }
            }
        }
    }
}

.recentData {
    width: 100%;
    height: calc(100vh - 300px);
}
</style>
